<template>
	<div class="doc_pc_components_Checkbox">
		<div>
			单独使用:
			<Checkbox
				v-model="value"
				class="doc-Checkbox"
			/>
			<Checkbox
				v-model="value"
				disabled
				class="doc-Checkbox"
			/>
			{{value}}
		</div>
		<div>
			标签:
			<Checkbox
				v-model="value"
				label="是否启用"
				class="doc-Checkbox"
			/>
			<Checkbox
				v-slot="data"
				v-model="value"
				label="是否启用"
				class="doc-Checkbox"
			>插槽-{{data}}</Checkbox>
			<Checkbox
				v-model="value"
				label="是否启用"
				disabled
				class="doc-Checkbox"
			/>
		</div>
		<div>
			颜色:
			<Checkbox
				v-model="value"
				color="green"
				class="doc-Checkbox"
			/>
		</div>
		<div>
			大小:
			<Checkbox
				v-model="value"
				size="26"
				class="doc-Checkbox"
			/>
			<Checkbox
				v-model="value"
				label="是否启用"
				size="26"
				class="doc-Checkbox"
			/>
			<Checkbox
				v-model="value"
				size="26"
				disabled
				class="doc-Checkbox"
			/>
			<Checkbox
				v-model="value"
				label="是否启用"
				size="26"
				disabled
				class="doc-Checkbox"
			/>
		</div>
		<div>
			不确定状态:
			<Checkbox
				v-model="value2"
				toggle-indeterminate
				class="doc-Checkbox"
			/>
			<Checkbox
				v-model="value2"
				toggle-indeterminate
				toggle-order="ft"
				class="doc-Checkbox"
			/>
			<Checkbox
				v-model="value2"
				toggle-indeterminate
				disabled
				class="doc-Checkbox"
			/>
		</div>
		<div>
			自定义值:
			<Checkbox
				v-model="value3"
				toggle-indeterminate
				:true-value="1"
				:false-value="2"
				:indeterminate-value="3"
				class="doc-Checkbox"
			/>
			{{value3}}
		</div>
		<div>
			自定义图标:
			<Checkbox
				v-model="value"
				class="doc-Checkbox"
			>
				<template #icon="{active}">
					<Icon
						:name="active===true?'bi-check-circle':active===false?'bi-circle':'bi-dash-circle'"
					/>
				</template>
			</Checkbox>
			<Checkbox
				v-model="value2"
				toggle-indeterminate
				class="doc-Checkbox"
			>
				<template #icon="{active}">
					<Icon
						:name="active===true?'bi-check-circle':active===false?'bi-circle':'bi-dash-circle'"
					/>
				</template>
			</Checkbox>
			<Checkbox
				v-model="value3"
				toggle-indeterminate
				:true-value="1"
				:false-value="2"
				:indeterminate-value="3"
				class="doc-Checkbox"
			>
				<template #icon="{active}">
					<Icon
						:name="active===true?'bi-check-circle':active===false?'bi-circle':'bi-dash-circle'"
					/>
				</template>
			</Checkbox>
		</div>
		<div>
			数组:
			<Checkbox
				v-model="value4"
				label="选项1"
				name="1"
				class="doc-Checkbox"
				@active="activeFn"
				@inactive="inactiveFn"
			/>
			<Checkbox
				v-model="value4"
				label="选项2"
				name="2"
				class="doc-Checkbox"
				@active="activeFn"
				@inactive="inactiveFn"
			/>
			<Checkbox
				v-model="value4"
				label="选项3"
				name="3"
				class="doc-Checkbox"
				@active="activeFn"
				@inactive="inactiveFn"
			/>
			<Checkbox
				v-model="value4"
				label="选项4"
				name="4"
				class="doc-Checkbox"
				@active="activeFn"
				@inactive="inactiveFn"
			/>
			{{value4}}
		</div>
		<div>
			MySet:
			<Checkbox
				v-model="value5"
				label="选项1"
				name="1"
				class="doc-Checkbox"
				@active="activeFn"
				@inactive="inactiveFn"
			/>
			<Checkbox
				v-model="value5"
				label="选项2"
				name="2"
				class="doc-Checkbox"
				@active="activeFn"
				@inactive="inactiveFn"
			/>
			<Checkbox
				v-model="value5"
				label="选项3"
				name="3"
				class="doc-Checkbox"
				@active="activeFn"
				@inactive="inactiveFn"
			/>
			<Checkbox
				v-model="value5"
				label="选项4"
				name="4"
				class="doc-Checkbox"
				@active="activeFn"
				@inactive="inactiveFn"
			/>
			{{Array.from(value5.value)}}
		</div>
		<div>
			手动控制:
			<Checkbox
				active
				class="doc-Checkbox"
			/>
			<Checkbox
				active="indeterminate"
				class="doc-Checkbox"
			/>
			<Checkbox
				:active="false"
				class="doc-Checkbox"
			/>
		</div>
		<div>
			单独使用,切换前置处理:
			<Checkbox
				v-model="value"
				:before-change="beforeChange"
				class="doc-Checkbox"
			/>
			<Checkbox
				v-model="value3"
				toggle-indeterminate
				:true-value="1"
				:false-value="2"
				:indeterminate-value="3"
				:before-change="beforeChange"
				class="doc-Checkbox"
			/>
		</div>
		<div>
			组合使用,切换前置处理:
			<Checkbox
				v-model="value4"
				label="选项1"
				name="1"
				:before-change="beforeChange"
				class="doc-Checkbox"
			/>
			<Checkbox
				v-model="value4"
				label="选项2"
				name="2"
				:before-change="beforeChange"
				class="doc-Checkbox"
			/>
			<Checkbox
				v-model="value4"
				label="选项3"
				name="3"
				:before-change="beforeChange"
				class="doc-Checkbox"
			/>
			<Checkbox
				v-model="value4"
				label="选项4"
				name="4"
				:before-change="beforeChange"
				class="doc-Checkbox"
			/>
		</div>
	</div>
</template>

<script setup>
import {shallowRef} from 'vue';
import {Checkbox,Icon,util} from 'powerful-ui/pc-default';

const value=shallowRef(false);
const value2=shallowRef(false);
const value3=shallowRef(1);
const value4=shallowRef([]);
const value5=shallowRef(new util.MySet());

function activeFn(data){
	console.log('打开',data);
}
function inactiveFn(data){
	console.log('关闭',data);
}
function beforeChange(data){
	console.log('即将切换',data);
	return false;
}
</script>

<style lang="scss">
.doc_pc_components_Checkbox{
	>div{
		margin:20px;
	}
	.doc-Checkbox{
		margin-right:20px;
	}
}
</style>